<template>
  <div class="errorBox">
    <img src="~assets/svg/404.svg" />
    <div>
      您来到了一个神秘的国度！<br />error_code: 404<br />error_detail: page not
      found!<br />
      <span>跑腿侠将在{{ seconds }}秒后带您重返首页</span>
    </div>
  </div>
</template>

<script>
export default {
    name: 'error',
    data () {
        return {
            seconds: 6,
            timer: null
        };
    },
    mounted () {
        this.timer = setInterval(() => {
            this.seconds = this.seconds - 1;
        }, 1000);
        // 这样写的原因是在监听beforeDestroy生命周期去调用这个方法，比起直接在beforeDestroy写更加优美
        this.$once('hook:beforeDestroy', () => {
            clearInterval(this.timer);
        });
    },
    watch: {
        seconds: function (value) {
            if (value === 0) {
                clearInterval(this.timer);
                this.$router.replace({ name: 'index' });
            }
        }
    }
};
</script>

<style scoped lang="less" src="./less/error.less"></style>
